<!-- 文件所有权归北京优博泰克 -->
<template>
    <div class="loginBox" v-loading="loading" element-loading-text="发送中"
        element-loading-background="rgba(255, 255, 255, 1)">
        <div class="leftBox">
            <p>忘记了你的登录密码？</p>
            <p>请在下面填写你的用户名，我们会给您注册时填写的邮箱发一封重置密码邮件，或者联系管理员要求修改密码。</p>
        </div>
        <div class="rightBox">
            <el-form :model="loginForm" status-icon ref="formInstance" label-width="1px" class="demo-ruleForm"
                label-position="left" :show-message="false">
                <p class="oyjory">输入用户名</p>
                <el-form-item label="" prop="usesrname" required>
                    <el-input style='width:322px;margin-top: 10px;' v-model="loginForm.usesrname" placeholder="请填写您的用户名"
                        @keyup.enter.native="sendemail"></el-input>
                </el-form-item>
                <p class="reloginB" @click="relogin">想起来了，重新登录！</p>
                <el-form-item>
                    <div class="loginbtn" @click="sendemail">发送</div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { reactive, toRefs, ref } from 'vue'
import api from '@/api'

let emits = defineEmits(['chageactive'])

let formInstance = ref(null)

let state = reactive({
    selectRemember: 0,
    loading: false,
    loginForm: {
        usesrname: '',
    }
})
let { loading, loginForm } = toRefs(state)

//重新登录
let relogin = () => {
    emits('chageactive', 1)
}

//发送email
let sendemail = () => {
    formInstance.value.validate(async (valid) => {
        if (!valid) return
        state.loading = true
        let params = {}
        params.username = state.loginForm.usesrname
        let m_ip = "" //192.168.22.139 http://172.17.44.151/
        let m_port = ""
        if (localStorage.getItem("m_ip") != null) {
            m_ip = localStorage.getItem("m_ip")
        }
        if (localStorage.getItem("m_port") != null) {
            m_port = localStorage.getItem("m_port");
        }
        const ipport = m_ip + ":" + m_port;
        const httpUrl = "https://" + ipport +
            "/"; //172.168.10.50:8000    182.92.84.59:8888  192.168.22.139:8000      166z857z47.iask.in:16191  192.168.4.166:5555  10.10.3.133:5555  q284565z75.zicp.vip
        params.url = httpUrl + "#/"

        let res = await api.changeaxiosdata('resetUser', 'post', params)
        if (res) {
            state.loading = false
            let res = response.data
            //用户名正确
            this.$confirm('您的密码已经发送到' + res.msg + '邮箱，请点击邮件链接更改地址。', '邮件已发送', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {

            }).catch(() => { })
        }
    })
}
</script>
<style scoped>
p {
    margin: 0;
    padding: 0;
}

.loginBox {
    z-index: 1;
    /* width: 450px; */
    height: 400px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.leftBox {
    color: #333333;

}

.leftBox p:nth-child(1) {
    font-size: 23px;
    text-align: center;
}

.leftBox p:nth-child(2) {
    font-size: 16px;
    margin-top: 20px;
    width: 322px;
}


.rightBox {
    margin-top: 20px;
}

.oyjory {
    color: #8492A6;
    font-size: 18px;
    margin-bottom: 10px;
}


.loginbtn {
    width: 322px;
    height: 44px;
    background: rgba(1, 101, 180, 1);
    border-radius: 4px;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    line-height: 44px;
    margin-top: 22px;
    cursor: pointer;
}

.reloginB {
    font-size: 14px;
    color: #9B9B9B;
    margin-top: 20px;
    text-align: right;
    cursor: pointer;
}
</style>
